<template>
  <div class="app-container home">
	<el-row>
		<el-col :span="20">
			<h2>欢迎使用，贵州春野美妆商贸有限公司！</h2>
		</el-col>
		<el-col :span="4">
			 <p style="text-align: right;">
				 <el-button type="primary" round @click="getData()">刷新<el-icon><Refresh /></el-icon></el-button>
			 </p>
		</el-col>
	</el-row>
	<el-divider />
	<div style="text-align: center;">
		<el-row :gutter="56">
			<el-col :span="8"  v-for="(item, i) in list" :key="i">
				 <el-card style="max-width: 480px">
				    <h2>{{item.amountTip}}：<el-text size="large" style="font-size: 24px;" type="danger"><el-icon @click="handleShow('￥'+(item.amount||0.0).toFixed(2))"><Hide /></el-icon></el-text></h2>
					<p>{{item.totalTip}}：<el-text size="large" type="primary"><el-icon @click="handleShow(item.total)"><Hide /></el-icon></el-text></p>
				  </el-card>
			</el-col>
		</el-row>
		<el-row style="margin-top: 30px;">
			<el-col :span="24">
				<div id="main" ref="chartContainerRef" style="width: 100%; height: 500px;"></div>
			</el-col>
		</el-row>
	</div>
	
  </div>
</template>

<script setup name="Index">
import { ref } from 'vue';
import office from '@/assets/images/office.jpg'
import logo from '@/assets/images/logo.png'
import * as echarts from 'echarts';
const { proxy } = getCurrentInstance();
import {  ElMessageBox} from 'element-plus'
import {homeStatistics,hotGoods} from '@/api/crm/statistics.js'

const version = ref('3.8.7')

const serviceImage = import.meta.env.VITE_APP_BASE_API+'/home/getServiceImg'

const img1 =  office;
const img2 =   logo;

const list = ref([]);

const chartContainerRef = ref(null)

let authPwd = false;

function goTarget(url) {
  window.open(url, '__blank')
}
function getHomeStatistics(){
	homeStatistics().then(rsp=>{
		list.value = rsp.data
		
		list.value[0].amountTip = "今日交易金额"
		list.value[0].totalTip = "今日交易笔数"
		list.value[1].amountTip = "本月交易金额"
		list.value[1].totalTip = "本月交易笔数"
		list.value[2].amountTip = "本月会员储值金额"
		list.value[2].totalTip = "本月新增会员数"
	})
}

function getHotGoods(){
	hotGoods().then(rsp=>{
		const myChart = echarts.init(chartContainerRef.value);
		
		let dataAxis = [];
		let data = [];
		for (var i = 0; i < rsp.data.length; i++) {
			var item = rsp.data[i];
			dataAxis.push(item.goods_name);
			data.push(item.total)
		};
		
		
		let option = {
		 title: {
			text: '热销商品TOP10',
		  },
		  tooltip: {
			trigger: 'axis',
			axisPointer: {
			  type: 'shadow'
			},
			formatter: function (params) {
			  var tar = params[0];
			  return '<h3 style="color:#409EFF;">'+tar.name+'</h3>销售数量：<span style="color:#F56C6C;">'+tar.data+'</span>';
			}
		  },
		  xAxis: {
		    type: 'category',
		    data: dataAxis
		  },
		  yAxis: {
		    type: 'value'
		  },
		  series: [
		    {
		      data: data,
		      type: 'bar'
		    }
		  ]
		};
		
		myChart.setOption(option);
	})
}

function getData(){
	getHomeStatistics();
	getHotGoods();
}

function handleShow(val){
	if(authPwd){
		proxy.$modal.alert(val,'数据详情')
	}else{
		ElMessageBox.prompt('请输入授权密码查看数据', "授权提示", {
		  confirmButtonText: '确定',
		  cancelButtonText: '取消',
		  type: "warning",
		  inputType:'password'
		}).then(({ value }) => {
			if('cy123888'===value){
				authPwd = true;
				proxy.$modal.alert(val,'数据详情')
				setTimeout(()=>{
					authPwd = false;
				},1000*60*1)
			}else{
				proxy.$modal.msgWarning('无效授权密码.')
			}
		}).catch(() => {
		})
	}
	
}

getData();


</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
  
}
</style>

